<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
    
<script>    
 export default {
    name:'HomeSwiper',
    data (){
        return {
            swiperOptions:{
                pagination: '.swiper-pagination',
                loop:true
                // autoHeight: true
            },
            swiperList:[{
                id:'0001',
                imgUrl:'http://img1.qunarzz.com/sight/p0/2110/f3/f37ce8102d8cf49ea3.img.jpg_600x330_2f3fd820.jpg'
            },{
                id:'0002',
                imgUrl: 'http://qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/010631200089g61st45B9.jpg_600x330_a80e4c10.jpg'
             }]
        }
  },
}
</script>
    
<style lang='stylus' scoped>
    .wrapper>>>.swiper-pagination-bullet-active
        background:#fff
    .wrapper>>>.swiper-slide img {
        width 100%
        height 100px
    }

    .wrapper
        // position relative
        overflow:hidden
        width:100%
        height:0
        padding-bottom:31.25%
        box-sizing: border-box
        background:#eee
        .swiper-img
            width:100%
     .wrapper>>>.swiper-pagination
         width 100%
         margin-top: -30px;
</style>
    